\chapter[Getting Started]{Getting Started}

\section{Getting Started}

In this section, we'll give you all the advice you need to getting started with \GRID.
\\
First of all, you have to include the OS3Grid files inside your page, this is as simply as:\\
\\
\texttt{
	<link type="text/css" rel="stylesheet" href="os3grid.css" />\\
	<script src="os3grid.js" type="text/javascript"></script> 
}
\\
\\
Please, remember to set the right paths of \texttt{os3grid.css} and \texttt{os3grid.js}.\\
\\
Then, for the real stuff, you have to create an HTML object as a placeholder where the grid will be 
rendered once created. The HTML object \textbf{MUST} have an unique id 
(for the \texttt{getElementById()} call by \GRID itself). \\
Usually, I create a \texttt{<div>} block, like the following:\\
\\
\texttt{<div id="grid" ></div>}\\
\\
Then, you have to create your grid using JavaScript. 
Grid attributes and settings are explained in the following chapters, but here we'll show you a simple example:\\
\\
\texttt{
<script type="text/javascript"> \\
	// Create an OS3Grid instance \\
	var g = new OS3Grid (); \\
\\
	// Grid Headers are the grid column names \\
	g.set\_headers ( 'nick', 'Name', 'Surname', 'E-Mail Address' ); \\
\\
	// If contents is bigger than container, Grid will automatically show scrollbars \\
	g.set\_scrollbars ( true ); \\
\\
	// The grid will have a solid border (these are CSS attributes) \\
	g.set\_border ( 1, "solid", "\#cccccc" ); \\
\\
	// Now, we add some rows to the grid \\
	g.add\_row ( 'fsoft', 'Fabio', 'Rotondo', 'fsoft (@) sourceforge (dot) net' ); \\
	g.add\_row ( 'john', 'John', 'Bustone', 'jbust (@) somewhere (dot) net' ); \\
	g.add\_row ( 'mkey', 'Mark', 'Key', 'mkey (@) okay (dot) net' ); \\
	g.add\_row ( 'jdoe', 'John', 'Doe', 'redbull (@) batman (dot) net' ); \\
\\
	// Show the grid replacing the original HTML object with the "grid" ID. \\
	g.render ( 'grid' ); \\
</script> 
} \\
\\
Now that you have learned all the basics, it is just time to give our grid a bit of life.
One of the advantages of having a grid on the webpage (from a user point of view) is that you can sort the rows 
by clicking on the column names. Let's see how to achieve this with \GRID.\\
Add the following line of code in example above before the \texttt{g.render()} instruction:\\
\\
\texttt{g.set\_sortable ( true ); }\\
\\
Just a single line of code and you have sortable rows!\\
But let's get a bit further... What I really like on grids is the ability to have a single row 
highlighted when I move the mouse, so I can immediately have a glimpse of all row data at the same time. 
This is another one-liner for \GRID. Just put this right after (or before :-)  the \texttt{g.set\_sortable()}\\
\\
\texttt{g.set\_highlight ( true ); }\\
\\

